<template>
  <div class="container h100">
    <toolbar 
      :title="$route.meta.title" 
      :back="true" 
      rightText="帮助" 
      @handleRightTextClick="pay"></toolbar>
      
    <div class="fix-container">
      <scroll>
        <product-list @notifyThisProduct="notifyThisProduct"></product-list>
        <pay-list @notifyPayChange="notifyPayChange"></pay-list>
        <desc-view></desc-view>
      </scroll>
    </div>
    <div class="navigation">
      <button class="btn btn-block btn-primary" @click="pay">立即充值</button>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar";
import Scroll from "components/Scroll";
import ProductList from "./components/ProductList";
import PayList from "./components/PayList";
import DescView from "./components/PayDesc";

import {show} from 'utils/Base'

import {saveOrders} from 'api/OrdersApi'

export default {
  name: "PayIndex",
  components: {
    Toolbar,
    Scroll,
    ProductList,
    PayList,
    DescView
  },
  data () {
    return {
      form: {
        productId: 0,
        payType: ''
      }
    }
  },
  methods: {
    pay() {
      if(this.form.productId == 0) {
        show('请选择充值产品');
        return
      }

      if(this.form.payType == '') {
        show('请选择支付类型');
        return 
      }

      saveOrders(this.form)
        .then(res => {
          if(res.meta.success) {

          } else show(res.meta.message)
        })
    },
    notifyThisProduct (productId) {
      this.form.productId = productId;
    },
    notifyPayChange (payType) {
      this.form.payType = payType
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  position: relative;

  .btn {
    margin-top: 3px;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
